<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=0">

    <title>订单详情</title>

    <link href="css/admin.css" rel="stylesheet" type="text/css">
    <link href="css/amazeui.css" rel="stylesheet" type="text/css">
    <link href="css/personal.css" rel="stylesheet" type="text/css">
    <link href="css/infstyle.css" rel="stylesheet" type="text/css">
    <link href="css/lostyle.css" rel="stylesheet" type="text/css">
    <link href="css/layui.css" rel="stylesheet" type="text/css">
    <script src="js/jquery.min.js" type="text/javascript"></script>
    <script src="js/amazeui.js" type="text/javascript"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.js"></script>
    <script src="js/common.js"></script>
</head>
<body>
<!-------------------------------------- 头部开始 -------------------------------------->
<div id="app">
    <top></top>
    <bar></bar>
    <b class="line"></b>
    <!-------------------------------------- 头部结束 -------------------------------------->

    <!-------------------------------------- 内容开始 -------------------------------------->

    <div class="center">
        <div class="col-main">
            <div class="main-wrap">
                <!--------------------------------------标题开始 -------------------------------------->
                <div class="am-cf am-padding">
                    <div class="am-fl am-cf"><strong class="am-text-danger am-text-lg">订单详情</strong> / <small>detailed
                        information</small></div>
                </div>

                <hr>

                <div class="package-status">
                    <ul class="status-list">
                        <li>
                            <p class="text">{{order.id}}</p>
                            <div class="time-list">
                                <span class="time">订单编号</span>
                            </div>
                        </li>
                        <li>
                            <p class="text">{{order.state.stateValue}}</p>
                            <div class="time-list">
                                <span class="time">订单状态：</span>
                            </div>
                        </li>
                        <li>
                            <p class="text">{{order.workers.name}}</p>
                            <div class="time-list">
                                <span class="time">维修人员：</span>
                            </div>
                        </li>
                        <li class="latest">
                            <p class="text">{{order.address.detail}}</p>
                            <div class="time-list">
                                <span class="time">客户地址：</span>
                            </div>
                        </li>
                        <li class="latest">
                            <p class="text">{{order.phone}}</p>
                            <div class="time-list">
                                <span class="time">手机号码：</span>
                            </div>
                        </li>
                        <li>
                            <p class="text">{{order.orderTime}}</p>
                            <div class="time-list">
                                <span class="time">下单时间：</span>
                            </div>
                        </li>
                        <li>
                            <p class="text">{{order.faultDescription}}</p>
                            <div class="time-list">
                                <span class="time">维修类型：</span>
                            </div>
                        </li>
                        <li>
                            <p class="text">{{order.repairTime}}</p>
                            <div class="time-list">
                                <span class="time">维修时长：</span>
                            </div>
                        </li>
                        <li>
                            <p class="text">{{order.finishTime}}</p>
                            <div class="time-list">
                                <span class="time">结束时间：</span>
                            </div>
                        </li>
                        <li>
                            <p class="text" v-for="materialsUse,index in order.materialsUses">
                                {{materialsUse.materialsName.title}}</p>
                            <div class="time-list">
                                <span class="time">使用耗材：</span>
                            </div>
                        </li>
                        <li>
                            <p class="text">{{order.materialsPrice}}</p>
                            <div class="time-list">
                                <span class="time">耗材明细：</span>
                            </div>
                        </li>
                        <!--点击返回上一页面-->
                        <button type="button" class="layui-btn layui-btn-lg" @Click="ret">点击返回</button>
                    </ul>
                </div>

            </div>

            <!-------------------------------------- 内容结束 -------------------------------------->
            <!-------------------------------------- 尾部开始 -------------------------------------->
            <end></end>
        </div>
        <!-------------------------------------- 尾部结束 -------------------------------------->

        <!-------------------------------------- 侧边导航栏开始 -------------------------------------->
        <ban></ban>
    </div>
</div>

<!-------------------------------------- 侧边导航栏结束 -------------------------------------->
</body>
</html>


<script>

    var app = new Vue({
        el: "#app",
        data: {
            id: "",
            admin: {},
            message: '',
            getUrl:'',
            order:{}
        },
        created: function () {
            this.getUrlParam();
            axios.post("http://localhost:8080/worker/detailed?id="+this.id)
            .then(res=>{
           this.order=res.data.data;
           console.log(this.order)
            })
        },
        methods: {
            getUrlParam: function () {
                var url = location.search;
                var theParam = 0;
                if (url.indexOf("?") != -1) {
                    var str = url.substr(1);
                    this.id=str.substr(3)


                }

            },
            ret:function (){
                location.href="billist.html";
            }

            },
        });
</script>
